<!DOCTYPE html>
<html>

<head lang="en">
    <title>购物车</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/muList.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlank.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>



</head>
<style>

    .li3 img {
        margin-left: 1.2rem;
        border: 1px solid #dcdcdc;
        padding: 0.1rem;
    }

    h7{
        color: orangered;
    }
</style>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-3">
            <a href="/mine/store.html">
                    <span><i class="fa fa-chevron-left fa-2x "
                             style="color:white;font-size:25px;position: absolute;top:20%;left:10%"></i></span>
            </a>
        </div>
        <div class="col-2"></div>
        <div class="col-5">
            <div class="input-group-sm search">
                <i class="fa fa-shopping-cart"
                   style="color:white;font-size:25px;position: absolute;top: 23%;left: 0%">
                </i>
                <span style="color: white;font-size: 18px;left: 100%;">购物车</span>
            </div>
        </div>
    </div>
</div>
<body background="/upload/15.jpg"></body>
<div class="body">
    <div class="qbdd">
        <ul>
            <li><a href="/mine/spdd.html">全部订单</a></li>
            <li><a href="#" class="aclass">待付款</a></li>
            <li><a href="/mine/spdd.html">待收货</a></li>
            <li><a href="/mine/pay.html">结算</a></li>
        </ul>
    </div>
    <li class="li5" style="color: red;">所需总积分：￥<span id="pay"></span></li>
    <li class="li5" style="color: red;">你的总积分为：￥<span id="count"></span></li>
    <h6>-----------------------------------------------------------------------------</h6>

    <div class="smaller">
        <div render-loop="list">
            <div style="margin-bottom: 20px">
                    <div class="row news-detail">
                        <div class="col-4">
                            <img render-src="list.store.picture" style="height: 90px">
                        </div>
                        <li class="li4">
                            <em><strong><h7 render-html="list.store.diseribe"></h7></strong></em>&nbsp;&nbsp;&nbsp;
                            <i class="fa fa-close" aria-hidden="true"></i>&nbsp;
                            <h7 id="input" render-key="list.number" render-fun="getCount"></h7>
                            <br/>
                             需要的总积分:<h7 class="totalCount" render-key="list.store.price" render-fun="getIntegral"></h7>
                            </span><br>
                            <button style="background-color: blue" class="delete" >撤销</button>
                            <input type="hidden" id="storeId" class="storeId" render-value="list.id"></input>
                        </li>
                    </div>
               <!-- </a>-->
                <hr>
            </div>
        </div>
    </div>


    <div class="wx_nav" id="wx_nav">
        <a href="store.html" class="nav_index" id="nav_index">商城</a>
        <a href="/mine/pay.html" class="nav_shopcart" id="nav_shopcart">结算</a>
        <a href="spdd.html" class="nav_me on" id="nav_me on">订单</a>
    </div>
</div>
</body>
<script>
    //购买的数量
    var count;
    //
    //去查询出用户已加入购物车的商品
    $.get(baseUrl+"/usergoods/"+user.id,{state:1},function (data) {
        if (data.length==0){
            $(document).dialog({
                autoClose: 2000,
                content: '你还没有添加任何商品',
            });
        }
        $(".smaller").renderValues({list:data},{
            getCount : function (item, value) {
                count=value;
                $(item).html(value);
            },
            getIntegral: function (item,value) {
                //计算每件商品的总价
                $(item).html(value*count);
            }
        });
        //用来存储总积分
        var totalCount = 0;
        var num = $(".totalCount");
        //循环数组里的价格
        $.each(num,function (index, ele) {
            //循环的同时将每个商品的价格相加放入totalCount
            totalCount += parseInt($(ele).html()) ;
        });
        //将价钱设置到总金额里
        $("#pay").html(totalCount);
        //如果购物车为空
        if(totalCount==0){
            $(".qbdd,.ddbh,.ddfk").remove();
        }else {
            $("#shoppingCart").remove();
        }
        //当点击撤销的时候
       $(".delete").click(function () {
           var id=$(this).siblings(".storeId").val();
           $.ajax({
               url:baseUrl+'/usergoods/'+id,
               method:'delete',
               success:function () {
                   $(document).dialog({
                       autoClose: 2000,
                       content: '撤销成功了',
                   });
                   setTimeout(function () {
                       window.location.reload();
                   },1500)
               }
           })
       })
        //回显积分
        $.get(baseUrl+"/integrals",{userId:user.id},function (data) {
            $("#count").html(data.integral)
        });
    });

</script>
</html>